<template>
  <div class="test">
    <input
      type="button"
      value="handleChangeFullName"
      @click="handleChangeFullName"
    />
    {{ fullName }}

    <!--
      computed 可以直接当做data中的属性一样使用，定义的时候是以函数定义
      computed 无法直接传递参数
     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '源码时代',
      lastName: 'html5'
    }
  },
  methods: {
    handleChangeFullName() {
      // this.firstName = ''
      // this.fullName = '源码时代-java'
      this.fullName = 'ymsd-java'
    }
  },
  computed: {
    // fullName(sr) {
    //   console.log(sr)
    //   return this.firstName + '-' + this.lastName
    // }

    fullName: {
      get() {
        return this.firstName + '-' + this.lastName
      },
      set(val) {
        // console.log(val)
        const arr = val.split('-')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  }
}
</script>
<style lang="scss"></style>
